<template>
  <form class="order-form" @submit.prevent="submitOrder">
    <div class="form-item">
      <!-- <div
          class="custom-input-number"
          style="background-color: #f9f9f9; cursor: pointer"
          @click="selectPriceDiv"
        >
          <span class="prefix">以最优价下单</span>
          <div class="input"></div>
          <span class="suffix" style="margin-right: 12px">></span>
        </div> -->

      <a-select
        v-model:value="association"
        style="width: 100%"
        @change="associationChange"
        :options="associationOptions"
      >
      </a-select>
      <a-select
        v-model:value="dayNumber"
        style="width: 100%"
        @change="dayNumberChange"
        :options="dayNumberOptions"
      >
      </a-select>
    </div>
    <div class="form-item">
      <!-- <a-input v-model="total" prefix="交易额" class="limit-order-input" suffix="USDT" /> -->
      <div class="custom-input-number">
        <span class="prefix">
          <a-select
            ref="select"
            v-model:value="isTriPrice"
            style="width: 100%"
            :bordered="false"
            @change="isTriPriceChange"
            placement="bottomLeft"
            :dropdownStyle="{ width: '160px' }"
            :options="isTriPriceOptions"
          >
          </a-select>
        </span>
        <a-input
          type="number"
          v-model:value="triggerPrice"
          @change="triggerPriceChange"
          min="0"
          step="0.1"
          class="input"
        />
        <span class="suffix" style="margin-right: 12px">
          {{ transType == "number" ? `${buyType.currencyType}` : "USDT" }}
        </span>
      </div>
    </div>
    <div class="form-item">
      <div class="custom-input-number">
        <span class="prefix">委托价格</span>
        <a-input
          type="number"
          @change="entrustPriceChange"
          v-model:value="entrustPrice"
          min="0"
          step="0.1"
          class="input"
        />
        <span class="suffix">USDT</span>
      </div>
    </div>

    <div class="form-item">
      <div class="custom-input-number">
        <span class="prefix">数量</span>
        <a-input
          type="number"
          @change="numberChange"
          v-model:value="numberAmount"
          min="0"
          step="0.1"
          class="input"
        />
        <span class="suffix">BTC</span>
      </div>
    </div>

    <a-slider id="test" class="limit-order-slider" v-model="sliderValue" />

    <div class="form-item">
      <div class="custom-input-number">
        <span class="prefix">交易额</span>
        <a-input
          type="number"
          @change="aTurnoverChange"
          v-model:value="aTurnover"
          min="0"
          step="0.1"
          class="input"
        />
        <span class="suffix">USDT</span>
      </div>
    </div>

    <div class="form-item bottom-text-limit-order">
      <label>可用</label>
      <span>0.000000 USDT</span>
    </div>
    <!-- <div class="form-item bottom-text-limit-order">
      <label>{{ props.tradeType === "buy" ? "最大可买" : "最大可卖" }}</label>
      <span>-- {{ buyType.currencyType }}</span>
    </div> -->
    <div class="advanced-options">
      <div class="advanced-content">
        <label>
          <input type="checkbox" @change="optionsIocChange" v-model="ioc" />
          IOC
        </label>
      </div>
    </div>
    <button
      :class="props.tradeType === 'buy' ? 'submit-btn' : 'submit-btn-green'"
      type="submit"
    >
      {{
        props.tradeType === "buy"
          ? `买入 ${buyType.currencyType}`
          : `卖出 ${buyType.currencyType}`
      }}
    </button>
  </form>
</template>
<script setup>
import { buyType } from "@/data/mockData.js";
import {
  dayNumberOptions,
  associationOptions,
  isTriPriceOptions,
  dayNumberType,
  associationType,
} from "@/utils/constant.js";
import { ref, onMounted, nextTick } from "vue";
const props = defineProps({
  tradeType: String,
});
const sliderValue = ref(0);
const transType = ref("turnover");

//   new
const association = ref("oneWay");
const dayNumber = ref(1);
const triggerPrice = ref("");
const isTriPrice = ref("lessThan");
const entrustPrice = ref(0);
const numberAmount = ref("");
const aTurnover = ref("");
const ioc = ref(false);

onMounted(async () => {
  await nextTick();
  initEntrustPrice();
});

const initEntrustPrice = () => {
  const interval = setInterval(() => {
    const originalInput = document.querySelectorAll(".mantine-ysl0gg");
    if (originalInput[1]) {
      console.log(originalInput, "originalInput[1].value");
      console.log(originalInput[1], "originalInput[1].value");
      console.log(originalInput[1].value, "originalInput[1].value");
      entrustPrice.value = originalInput[1].value;
      console.log(entrustPrice.value, "entrustPrice.value");
      
      clearInterval(interval);
    } else {
      console.log("未找到mantine-ysl0gg元素");
    }
  }, 300);
};
const associationChange = (e) => {
  // const originalSelect = document.querySelectorAll(".mantine-wz61vw");
  const originalSelect = document.querySelectorAll(".mantine-1mu5xb2");
  console.log(originalSelect, "originalSelectssssssssss");
  
  if (originalSelect[0]) {
    originalSelect[0].click();
    // originalSelect[0].value = associationType[e];
    // originalSelect[0].dispatchEvent(new Event("input", { bubbles: true }));
    console.log(
      document.querySelectorAll(".mantine-GateSelect-item"),
      "mantine-GateSelect-item"
    );
    console.log(
      document.querySelectorAll(".mantine-Select-item"),
      "mantine-Select-item"
    );
    console.log(document.querySelectorAll(".mantine-2h5skc"), "mantine-2h5skc");
    setTimeout(() => {
      const originalSelectItem = document.querySelectorAll(".mantine-2h5skc");
      if (e == "oneWay") {
        originalSelectItem[0].click();
        console.log(e);
        // originalSelect[0].click()
        // originalSelect[0].dispatchEvent(new Event("input", { bubbles: true }));
      } else if (e == "twoWay") {
        console.log("99999999999999");
        console.log(document.querySelectorAll(".mantine-ysl0gg")[1].value, "wwpppppppppppppp");
        
        console.log(originalSelectItem, "wwwwweeeeeerrrrrrr");
        
        console.log(originalSelectItem[1], "wwwwweeeeeerrrrrrr");
        originalSelectItem[1].click();
      }
    }, 100);

    console.log(e);
    console.log(associationType);
    // originalSelect[0].click()
    // originalSelect[0].dispatchEvent(new Event("input", { bubbles: true }));
  } else {
    console.log("未找到mantine-wz61vw元素");
  }
};
const dayNumberChange = (e) => {
  console.log(e);
  console.log(
    document.querySelectorAll(".mantine-GateSelect-input"),
    "mantine-GateSelect-input"
  );
  console.log(
    document.querySelectorAll(".mantine-Input-input"),
    "mantine-Input-input"
  );
  console.log(
    document.querySelectorAll(".mantine-Select-input"),
    "mantine-Select-input"
  );
  console.log(document.querySelectorAll(".mantine-wz61vw"), "mantine-wz61vw");
  const originalSelect = document.querySelectorAll(".mantine-wz61vw");
  if (originalSelect[1]) {
    originalSelect[1].value = dayNumberType[e];
    originalSelect[1].dispatchEvent(new Event("input", { bubbles: true }));
    setTimeout(() => {
      const originalSelectItem = document.querySelectorAll(".mantine-2h5skc");
      if (e != 0) {
        originalSelectItem[Number(e) - 1].click();
        console.log(e);
        // originalSelect[0].click()
        // originalSelect[0].dispatchEvent(new Event("input", { bubbles: true }));
      } else {
        originalSelectItem[originalSelectItem.length - 1].click();
      }
    }, 100);
  } else {
    console.log("未找到mantine-wz61vw元素");
  }
};
const triggerPriceChange = (e) => {
  console.log(e);
  console.log(
    document.querySelectorAll(".mantine-GateInput-input"),
    "mantine-GateInput-input"
  );
  console.log(
    document.querySelectorAll(".mantine-Input-input"),
    "mantine-Input-input"
  );
  console.log(document.querySelectorAll(".gui-trade-input"), "gui-trade-input");
  console.log(document.querySelectorAll(".mantine-ysl0gg"), "mantine-ysl0gg");
  const originalInput = document.querySelectorAll(".mantine-ysl0gg");
  if (originalInput[0]) {
    originalInput[0].value = e.target.value;
    originalInput[0].dispatchEvent(new Event("input", { bubbles: true }));
  } else {
    console.log("未找到mantine-ysl0gg元素");
  }
};
const isTriPriceChange = (e) => {
  console.log(e);
  const originalSelect = document.querySelector(".mantine-1tzqd2b");
  if (originalSelect) {
    console.log(originalSelect, "原始选择框元素,点击了选择框");
    originalSelect.click();
    setTimeout(() => {
      const originalOptionList = document.querySelectorAll(".mantine-t9x8ai");
      console.log(originalOptionList, "原始选择框元素的选项列表");
      if (originalOptionList.length > 0) {
        if (e === "lessThan") {
          originalOptionList[0].click();
        } else if (e === "greaterThan") {
          originalOptionList[1].click();
        }
        //   originalSelect.dispatchEvent(new Event("change", { bubbles: true }));
      } else {
        console.log(".mantine-t9x8ai元素未找到");
      }
    }, 100);
  } else {
    console.log(".mantine-1tzqd2b元素未找到");
  }
};
const entrustPriceChange = (e) => {
  console.log(e);
  const originalInput = document.querySelectorAll(".mantine-ysl0gg");
  if (originalInput[1]) {
    originalInput[1].value = e.target.value;
    originalInput[1].dispatchEvent(new Event("input", { bubbles: true }));
    changeAturnoner();
  } else {
    console.log("未找到mantine-ysl0gg元素");
  }
};

// 数量
const numberChange = (e) => {
  console.log(e);
  const originalInput = document.querySelectorAll(".mantine-ysl0gg");
  if (originalInput[2]) {
    originalInput[2].value = e.target.value;
    originalInput[2].dispatchEvent(new Event("input", { bubbles: true }));
    changeAturnoner();
  } else {
    console.log("未找到mantine-ysl0gg元素");
  }
};

// 自动计算交易额
const changeAturnoner = () => {
  const originalAmount = document.querySelectorAll(".mantine-ysl0gg")[3].value;
  console.log(originalAmount, "wwwwwwww");
  aTurnover.value = originalAmount;
  console.log(aTurnover.value, "amount.value");
};

// 交易额
const aTurnoverChange = (e) => {
  console.log(e);
  const originalInput = document.querySelectorAll(".mantine-ysl0gg");
  if (originalInput[3]) {
    originalInput[3].value = e.target.value;
    originalInput[3].dispatchEvent(new Event("input", { bubbles: true }));
    changeNumber();
  } else {
    console.log("未找到mantine-ysl0gg元素");
  }
};

// 自动计算数量
const changeNumber = () => {
  const originalAmount = document.querySelectorAll(".mantine-ysl0gg")[2].value;
  console.log(originalAmount, "wwwwwwww");
  numberAmount.value = originalAmount;
  console.log(numberAmount.value, "amount.value");
};

const optionsIocChange = (e) => {
  console.log(e);

  console.log(document.querySelectorAll(".mantine-GateCheckBox-input"));
  console.log(document.querySelectorAll(".mantine-Checkbox-input"));
  console.log(document.querySelectorAll(".mantine-14u1gnw"));
  console.log(document.querySelectorAll(".mantine-muwcf3"), "mantine-muwcf3");
  console.log(document.querySelectorAll(".mantine-xsvmgd"), "mantine-xsvmgd");
  console.log(document.querySelectorAll(".mantine-11lhrkx"), "mantine-11lhrkx");
  const originalCheckbox = document.querySelector(".mantine-muwcf3");
  if (originalCheckbox) {
    const targetInput = originalCheckbox.querySelector("input");
    ioc.value = e.target.checked;
    targetInput.click();
  } else {
    console.log("未找到mantine-muwcf3元素");
  }

  //   if (originalCheckbox) {
  //     if (type === "post") {
  //       options.value.post = e.target.checked;
  //       originalCheckbox[0].click();
  //       options.value.ioc = false;
  //     } else if (type === "ioc") {
  //       options.value.ioc = e.target.checked;
  //       originalCheckbox[1].click();
  //       options.value.post = false;
  //     } else if (type === "iceberg") {
  //       options.value.iceberg = e.target.checked;
  //       isCheckboxIceberg.value = e.target.checked;
  //       originalCheckbox[2].click();
  //     }
  //   } else {
  //     console.log("没有找到原checkbox");
  //   }
};

//  /new

// const selectPrice = ref(0);
// const selectNumber = ref("");

// const selectPriceChange = (e) => {
//   console.log(e.target.value);
// }

//   const selectPriceDiv = () => {
//     console.log("点击了价格66666");
//     const originPriceDiv = document.querySelector(".mantine-1a3apo5");
//     if (originPriceDiv) {
//       originPriceDiv.click();
//     } else {
//       console.log(".mantine-1a3apo5元素未找到");
//     }
//   };

// const transTypeChange = (e) => {
//   console.log(e);
//   const originalSelect = document.querySelector(".mantine-1tzqd2b");
//   if (originalSelect) {
//     console.log(originalSelect, "原始选择框元素,点击了选择框");
//     originalSelect.click();
//     setTimeout(() => {
//       const originalOptionList = document.querySelectorAll(".mantine-t9x8ai");
//       console.log(originalOptionList, "原始选择框元素的选项列表");
//       if (originalOptionList.length > 0) {
//         if (e === "number") {
//           originalOptionList[0].click();
//         } else if (e === "turnover") {
//           originalOptionList[1].click();
//         }
//         //   originalSelect.dispatchEvent(new Event("change", { bubbles: true }));
//       } else {
//         console.log(".mantine-t9x8ai元素未找到");
//       }
//     }, 100);
//   } else {
//     console.log(".mantine-1tzqd2b元素未找到");
//   }
// };
// const selectNumberChange = (e) => {
//   const originalNumberInput = document.querySelector(
//     "#spot-market-price-amount-input"
//   );
//   if (originalNumberInput) {
//     originalNumberInput.value = e.target.value;
//     originalNumberInput.dispatchEvent(new Event("input", { bubbles: true }));
//   } else {
//     console.log("#spot-market-price-amount-input元素未找到");
//   }
//   console.log(e.target.value);
// };
</script>
<style scoped>
.order-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.advanced-options {
  /* margin-top: 16px; */
  border-top: 1px solid #eee;
  padding-top: 8px;
}

.advanced-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  color: #666;
}

.advanced-header span {
  margin-left: 5px;
}

.advanced-content {
  margin-top: 8px;
  display: flex;
  gap: 16px;
}

.advanced-content label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #333;
}

.custom-input-number,
.custom-input {
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 0 0 0 8px;
  width: 100%;
  height: 40px;
  background: #fff;
}

.custom-input-number .prefix,
.custom-input .prefix {
  color: #666;
  margin-right: 8px;
}

.custom-input-number .input,
.custom-input .input {
  width: 100%;
  border: none;
  outline: none;
  flex: 1;
  text-align: right;
  font-size: 16px;
  background: transparent;
}

.custom-input-number .suffix,
.custom-input .suffix {
  margin: 0 8px;
  color: #666;
}

.custom-input-number .btn-group {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}

.custom-input-number .btn-group button {
  border: none;
  border-left: 1px solid #eee;
  background: #fff;
  cursor: pointer;
  width: 24px;
  height: 20px;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.custom-input-number .btn-group button:first-child {
  border-bottom: 1px solid #eee;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.limit-order-input {
  width: 100%;
  height: 40px;
}

.limit-order-slider {
  width: 100%;
}

.form-item label {
  width: 60px;
  color: #666;
}

input[type="number"] {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.submit-btn {
  width: 100%;
  background: #f2495e;
  color: #fff;
  border: none;
  padding: 12px 0;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
}

.submit-btn-green {
  width: 100%;
  background: #1bb273;
  color: #fff;
  border: none;
  padding: 12px 0;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
}

.bottom-text-limit-order {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  font-size: 12px;
}

.bottom-text-limit-order span {
  color: #333;
}

/* 隐藏 Chrome、Edge、Safari 下的 number input 加减按钮 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 隐藏 Firefox 下的 number input 加减按钮 */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
</style>
